<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<template>
  <div>
    <h1>介绍公司产品的整体情况</h1>
    <ul class="tab">
      <li @click="handleJump('p1')">产品1</li>
      <li @click="handleJump('p2')">产品2</li>
      <li @click="handleJump('p3')">产品3</li>
    </ul>
    <!-- 渲染子组件 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    handleJump(target) {
      //编程式导航（通过事件的方式触发路由跳转）
      // this.$router.push(`/prod/${target}`);

      // 编程式导航传参
      this.$router.push({
        path: `/prod/${target}`,
        query: {
          color: "green",
          teacher: "美女老师",
          money: "越多越好",
        },
      });

      // 通过路由名称触发跳转
      // this.$router.push({
      //   name: `my-${target}`,
      // });
    },
  },
};
</script>

<style lang="scss" scoped></style>
